<template>
  <l-side-nav
    v-if="settingStore.showSidebar"
    :show-logo="settingStore.showSidebarLogo"
    :layout="settingStore.layout"
    :is-fixed="settingStore.isSidebarFixed"
    :menu="sideMenu"
    :userLevel="userLevel"
    :theme="settingStore.displayMode"
    :is-compact="settingStore.isSidebarCompact"
  />
</template>

<script setup lang="ts">
// @ts-nocheck
import { useRouter, useRoute } from 'vue-router';
import { computed, ref, watch } from 'vue';

import { storeToRefs } from 'pinia';
import { usePermissionStore, useSettingStore, useUserStore } from '@/store';
import LSideNav from './SideNav.vue';

// userLevel
const store = useUserStore();
const router = useRouter();
const route = useRoute();
const permissionStore = usePermissionStore();
const settingStore = useSettingStore();
const { routers: menuRouters } = storeToRefs(permissionStore);
const { userLevel } = storeToRefs(store);

const sideMenu = computed(() => {
  const { layout, splitMenu } = settingStore;
  console.log(store.userLevel, 'play');
  let newMenuRouters = menuRouters.value;
  if (layout === 'mix' && splitMenu) {
    newMenuRouters.forEach((menu) => {
      if (route.path.indexOf(menu.path) === 0) {
        newMenuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
      }
    });
  }
  let newMenuRouter = newMenuRouters.filter((ele) => {
    return ele.meta.Grade <= store.userLevel;
  });
  // newMenuRouters.forEach((el) => {
  //   if (el.meta.Grade <= store.userLevel) {
  //   } else {
  //     console.log(el.name, el.meta.title, el.meta.Grade, store.userLevel);
  //     newMenuRouters.forEach((element, indexs) => {
  //       if (el.name === element.name) {
  //         newMenuRouters.splice(indexs, 1);
  //       }
  //     });
  //   }
  // });
  // console.log(newMenuRouter);
  return newMenuRouter;
});
</script>
<style lang="less" scoped>
:deep(.t-default-menu) {
  width: 232px !important;
}
</style>
